<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Websocket Demo</title>
</head>
<body>
<span id="message"></span><br/>
<span id="login-user"></span><br/>
<input id="login-name" type="text"/><button type="button" onclick="login()">登录</button><br/>
<button id="connect" type="button" onclick="connect()">连接</button><br/>
<button id="disconnect" type="button" disabled="disabled" onclick="disconnect()">断开</button><br/>
<input id="text-value" type="text"/><button type="button" onclick="send()">发送</button><br/>
<div id="container"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.4.0/sockjs.min.js"></script>
<script>
    let ws;

    function login() {
        let loginName = $("#login-name").val();
        if (_.isEmpty(loginName)) {
            $("#message").html("登录名不能为空");
            return;
        }
        $.post("http://127.0.0.1:8080/login", {name:loginName}, function (resp) {
            $("#message").html("登录成功");
            $.get("http://127.0.0.1:8080/loginUser", function (resp) {
                $("#login-user").html(resp);
            })
        }, "text");
    }

    function send() {
        if (ws && ws.readyState === WebSocket.OPEN) {
            ws.send($("#text-value").val());
        } else {
            $("#message").html("连接不可用");
        }
    }

    function connect() {
        ws = new SockJS("http://127.0.0.1:8080/sockjsHandle");
        onconnect();
    }

    function onconnect() {
        ws.onopen = function(evt) {
            console.log("连接成功 ...");
            $("#message").html("连接成功");
            $("#connect").attr("disabled", "disabled");
            $("#disconnect").removeAttr("disabled");
        };
        ws.onmessage = function(evt) {
            console.log("收到服务器消息: " + evt.data);
            $("#container").append("<span>" + evt.data + "</span><br/>")
        };
        ws.onclose = function(evt) {
            console.log("断开成功");
            $("#message").html("断开成功");
            $("#connect").removeAttr("disabled");
            $("#disconnect").attr("disabled", "disabled");
        };
        ws.onerror = function (evt) {
            console.log("出错了: " + evt);
        }
    }

    function disconnect() {
        ws.close();
    }

</script>
</body>
</html>